<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<html>
<head>
    <title>Title</title>
   <%-- <style>
        table,tr,td{
            border: 1px red solid;
            border-collapse: collapse;
        }
    </style>--%>
</head>
<body>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>

    function to_page(page){//形参
        var total = ${total};  //总页面数
        //判断翻页的数据
        if(page<=1){
            page=1;
        }else if(page>=total){
            if(total==0){
                total=1;
            }
            page = total;
        }
        //把形参赋值给pageNum隐藏域
        $("#pageNum").val(page);
        //form表单提交
        $("#form1").submit();

    }

</script>
<%--搜索栏  模糊查询手机名称、是否热卖、品牌--%>
<form action="/productList.do" method="post" id="form1">
    手机名称： <input type="text" name="name" value="${name}">
    是否热卖：
    <input type="radio" name="isHot" value="2" checked/>全部
    <input type="radio" name="isHot" value="1" <c:if test="${isHot==1}">checked</c:if>/>是

    <input type="radio" name="isHot" value="0" <c:if test="${isHot==0}">checked</c:if>/>否

    品牌：
     <select name="typeId">
         <option value="-1">全部</option>
         <c:forEach items="${types}" var="type">
             <option value="${type.tid}"
                     <c:if test="${type.tid==typeId}">selected</c:if>
             >${type.tname}</option>
         </c:forEach>
     </select>
    <input type="submit" value="搜索" class="btn btn-primary btn-sm">
    <%--隐藏域--%>
    <input type="hidden" value="${pageNum}" name="pageNum" id="pageNum">
</form>

<%--主体数据--%>
<table class="table table-bordered table-condensed table-striped">
    <tr>
        <th>名称</th>
        <th>价格</th>
        <th>出厂日期</th>
        <th>是否热卖</th>
        <th>商品描述</th>
        <th>品牌</th>
    </tr>
    <%--遍历集合数据--%>
    <c:forEach items="${products}" var="product">
        <tr>
            <td>${product.name}</td>
            <td>${product.price}</td>
            <td>
                <fmt:formatDate value="${product.date}" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate>
            </td>
                <c:if test="${product.isHot==1}">
                    <td>是</td>
                </c:if>
                <c:if test="${product.isHot==0}">
                   <td>否</td>
                </c:if>

            <td>${product.description}</td>
            <td>
                ${product.types.tname}
            </td>
        </tr>
    </c:forEach>
<%--

    <tr>
        <td colspan="6" class="pagination pagination-lg" style="padding-left: 500px">
            <a href="javascript:to_page(1)">首页</a>
            <a href="javascript:to_page(${pageNum-1})">上一页</a>
            <span>第${pageNum}页/共${total}页</span>
            <a href="javascript:to_page(${pageNum+1})">下一页</a>
            <a href="javascript:to_page(${total})">尾页</a>
        </td>
    </tr>
--%>
</table>
<%--分页--%>
<ul class="pagination pagination-sm" style="padding-left: 550px">
    <li> <a href="javascript:to_page(1)">首页</a></li>
    <li> <a href="javascript:to_page(${pageNum-1})">上一页</a></li>
    <li> <span>第${pageNum}页/共${total}页</span></li>
    <li>  <a href="javascript:to_page(${pageNum+1})">下一页</a></li>
    <li> <a href="javascript:to_page(${total})">尾页</a></li>
</ul>

</body>
</html>
